<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vocabulary - AI French Teacher</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/french-theme.css') }}">
</head>
<body>
    <div class="container">

        <header>
            <div class="site-logo">
                <span class="eiffel-tower">🗼</span>
                <h1 class="app-title">AI French Teacher</h1>
            </div>
            <div class="french-flag-bar"></div>
            <nav>
                <a href="/">🎤 录音翻译</a>
                <a href="/vocabulary" class="active">📚 单词本</a>
                <a href="/history">📜 历史记录</a>
                {% if user and user.role == 'admin' %}
                <a href="/admin">🔐 管理面板</a>
                {% endif %}
                <a href="#" onclick="handleLogout()" style="color: #EF4135;">🚪 登出</a>
            </nav>
            <div style="text-align: right; font-size: 14px; color: #666; margin-top: 10px;">
                👤 {{ user.username if user else '未登录' }}
            </div>
        </header>


        <main>

            <div class="stats-cards">
                <div class="stat-card">
                    <div class="stat-number" id="totalWords">0</div>
                    <div class="stat-label">总词条</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" id="todayWords">0</div>
                    <div class="stat-label">今日新增</div>
                </div>
            </div>


            <div class="toolbar">
                <div class="search-box">
                    <input type="text" id="searchInput" placeholder="🔍 搜索法语或中文...">
                </div>
                <div class="toolbar-actions">
                    <button id="addWordBtn" class="btn-primary">➕ 添加单词</button>
                    <button id="exportBtn" class="btn-secondary">📥 导出</button>
                </div>
            </div>


            <div class="vocabulary-list" id="vocabularyList">
                <p class="placeholder">暂无单词，开始添加吧！</p>
            </div>
        </main>


        <footer>
            <p>AI French Teacher v3.0 | 2025</p>
            <p style="margin-top: 10px;">
                <a href="/credits" style="color: var(--french-blue); text-decoration: none; font-weight: 600;">
                    ⚜️ 致谢 / Remerciements
                </a>
            </p>
        </footer>
    </div>


    <div id="wordModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modalTitle">添加单词</h2>
                <span class="close">&times;</span>
            </div>
            <div class="modal-body">
                <form id="wordForm">
                    <input type="hidden" id="wordId">

                    <div class="form-group">
                        <label for="frenchInput">法语：</label>
                        <textarea id="frenchInput" required rows="3"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="chineseInput">中文：</label>
                        <textarea id="chineseInput" required rows="3"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="categoryInput">分类：</label>
                        <input type="text" id="categoryInput" value="翻译结果">
                    </div>

                    <div class="form-group">
                        <label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
                            <input type="checkbox" id="generateAudioInput" checked style="width: auto;">
                            <span>🔊 生成法语发音音频</span>
                        </label>
                        <p style="font-size: 12px; color: #666; margin-top: 5px;">勾选后将自动生成该单词的法语发音</p>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn-primary">保存</button>
                        <button type="button" class="btn-secondary" id="cancelBtn">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/vocabulary.js') }}"></script>
</body>
</html>

